
<template>
    <Poptip v-model="showPoptip" class="commodity-class-select" placement="bottom-start" width="250">
        <Button size="small" style="width:100%" @click="showPoptip=true">{{ titles.length > 0 ? titles.toString() : "未选择" }}</Button>
        <div class="api" slot="content">
            <treeview 
                :ref="treeId" :defaultSelectedValues="values" 
                :data="treeData" 
                :show-header="false" 
                :operateable="false"
                @on-select="handleOnSelect"
                @on-refresh="handleOnRefresh"></treeview>

            <Button size="small" type="primary" right mgt1 @click="handleOk">确认</Button>
        </div>
    </Poptip>
</template>

<script>
import Treeview from './treeview'

export default {
    props: {
        model: {
            type: Object,
            default: () => { return {} }
        },
        prop: {
            type: String,
            default: 'classes'
        },
        data: {
            type: Array,
            default: () => []
        },
    },
    components: {
        Treeview
    },
    data() {
        return {
            showPoptip: false,
            treeId: "commodity-class-treeview" + Date.now(),
            values: this.model[this.prop],
            titles: []
        }
    },
    computed: {
        treeData() {
            var storeData = this.$store.state.setting.settings.commodityClasses;
            return this.formatData(storeData);
        }
    },
    methods: {
        formatData(data) {
            var result = [];
            data.forEach(elem => {
                var temp = {
                    id: elem.value.id,
                    value: elem.value.name,
                    title: elem.value.displayName
                };
                if(elem.children) {
                    temp.children = this.formatData(elem.children);
                }
                result.push(temp);
            });
            return result;
        },
        handleOnSelect(values, simpleValues, titles, controller) {
            // this.values = simpleValues;
            // this.titles = titles;
            // this.$emit("input", values);
        },
        handleOnRefresh(controller) {
            this.titles = controller.getSelectedTitles();
        },
        handleOk() {
            var tree = this.$refs[this.treeId];
            this.titles = tree.getSelectedTitles();
            this.values = tree.getSelectedValues();
            this.model[this.prop] = this.values;
            this.$emit("input", this.values);
            this.showPoptip = false;
        }
    },
    watch: {
        model() {
            this.values = this.model[this.prop];
        }
    }
}
</script>

<style lang="less">
.commodity-class-select {
    .ivu-poptip-popper {
        padding: 0 !important;
    }
    .ivu-poptip-body {
        padding: 5px;
    }
    .ivu-poptip-arrow {
        display: none !important;
    }
    .ivu-poptip-rel {
        display: block;
    }
}
</style>
